<template>
  <!-- <div>第三方流水明细管理</div> -->
  <VPage>
    <div class="mx-[10px]">
      <el-tabs v-model="activeName">
        <el-tab-pane label="P卡" name="1"></el-tab-pane>
        <el-tab-pane label="PingPong" name="2"></el-tab-pane>
        <el-tab-pane label="万里汇" name="3"></el-tab-pane>
        <el-tab-pane label="连连" name="4"></el-tab-pane>
        <el-tab-pane label="空中云汇" name="5"></el-tab-pane>
      </el-tabs>
    </div>
    <template v-if="activeName == '1'">
      <Payonner :optionsData="optionsDataAll" />
    </template>
    <template v-else-if="activeName == '2'">
      <Pingpong :optionsData="optionsDataAll" />
    </template>
    <template v-else-if="activeName == '3'">
      <Wanlihui :optionsData="optionsDataAll" />
    </template>
    <template v-else-if="activeName == '4'">
      <Lianlian :optionsData="optionsDataAll" />
    </template>
    <template v-else>
      <Cloud :optionsData="optionsDataAll" />
    </template>
  </VPage>
</template>
<script setup>
import Payonner from "./components/payonner/index";
import Pingpong from "./components/pingpong/index";
import Wanlihui from "./components/wanlihui/index";
import Lianlian from "./components/lianlian/index";
import Cloud from "./components/cloud/index";
import { useEnumSelect } from "@/hooks/index.js";
import { getShop, getSites, getPlatform, getCurrency } from "@/api/index.js";
import { computed } from "vue";
const activeName = ref("1");
const optionsData1 = reactive({});
const { options: optionsData } = useEnumSelect({
  params: [
    "payoneer_payment_categories",
    "capital_flow_payoneer_trade_status",
    "lian_lian_capital_flow_type",
    "lian_lian_capital_flow_business_type",
  ],
});
const getPlatformList = async () => {
  const res1 = await getPlatform();
  const res2 = await getShop();
  if (res1?.data?.length) {
    const siteMap = res2.data.reduce((acc, curr) => {
      acc[curr.site_id] = curr;
      return acc;
    }, {});
    res1.data.forEach((item) => {
      item.sites?.forEach((it) => {
        it.shop = siteMap[it.site_id] || [];
      });
    });
  }
  optionsData1.platform = res1.data;
};
getPlatformList();
const getCurrencyList = async () => {
  const { data } = await getCurrency();
  optionsData1.currency = data;
};
getCurrencyList();
const optionsDataAll = computed(() => {
  return {
    ...optionsData1,
    ...optionsData.value,
  };
});
</script>
<style lang="scss" scoped>
:deep(.el-tabs__header) {
  margin: 0;
}
</style>
